<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>MyStore</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body>
<br>
<form class="layui-form" action="" id="searchForm">
    <div class="layui-form-item">
        <!--表格上方的搜索框-->
        <div class="layui-inline">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" id="userId" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="pwd" id="pwd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-inline">
                <input type="text" name="nickNama" id="nickNama" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</form>
<!-- 表格部分 -->
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->

        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>




<script>
    var $,table;
    layui.use('table', function(){
        table = layui.table;
        $ = layui.jquery;

        // url如果填写错误，会报“数据接口请求异常：error”错误
        table.render({
            elem: '#test'
            ,url:'/backend/userinfoJson'
            ,toolbar: '#toolbarDemo'
            ,title: '人员信息表'
            ,totalRow: true
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'userId', title:'用户ID', width:"20%"}
                    ,{field:'nickNama', title:'用户昵称', width:"50%"}
                    ,{field:'pwd', title:'密码', width:"30%"}

                ]
            ]
            ,page: true,
            limit:10,
            limits:[7,8,9,10,11,12,13,14,15],
            id:'orderTable'
        });


        // ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){return '<em>'+ res.email +'</em>'}}
        // ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
        // ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
        // ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
        // ,{field:'sign', title:'签名'}
        // ,{field:'city', title:'城市', width:100}
        // ,{field:'ip', title:'IP', width:120}
        // ,{field:'joinTime', title:'加入时间', width:120}

        //工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg("弹出添加页面");
                    parent.layer.open({
                        type: 2,    // 2 为跳转页面
                        offset:'auto',
                        title:'添加志愿者',
                        content:'/backend/userinfoadd',
                        area:['1000px','600px'],
                        btn:'关闭全部',
                        btnAlign:'c',
                        yes:function () {
                            parent.layer.closeAll();
                        }
                    });
                    break;

            };
        });

        table.on('rowDouble(test)',function (obj) {
            console.log(obj);
            var userId = obj.data.userId;
            // console.log(orderId);
            // alert(orderId);
            parent.layer.open({
                type: 2,    // 2 为跳转页面
                offset:'auto',
                title:'人员详情',
                content:'/backend/userinfodetail?userId=' + userId,
                area:['1000px','600px'],
                btn:'关闭全部',
                btnAlign:'c',
                yes:function () {
                    parent.layer.closeAll();
                }
            });
        })

        table.on('tool(test)',function (obj) {  // 注：tool是工具条时间名，test是table原始容器的名称
            var orderId = obj.data.order_id;    // 获得order_id
            var layEvent = obj.event;   // 货地lay-event对应的值，也可以是表头的event参数对应的值
            // var tr = obj.tr;    // 获得当前行tr的DOM对象(如果有的话)

            if (layEvent === 'del') {   // 删除操作
                layer.confirm('您真的要删除吗？',function (index) {
                    obj.del();      // 删除对应行(tr)的DOM结构，并更新缓存
                    layer.close(index);
                    // 向服务器发送删除指令
                    $.get("/courseorder/delete",{order_id:orderId},function (respData) {
                        console.log(respData);
                        if (respData.success == 1) {
                            layer.msg("删除成功");
                        } else {
                            layer.msg("删除失败" + respData.msg);
                        }
                    })
                })
            } else if (layEvent === 'edit') {   // 编辑操作
                // 弹出编辑页面
                // layer.msg("弹出编辑页面");
                parent.layer.open({
                    type: 2,    // 2 为跳转页面
                    offset:'auto',
                    title:'修改课程订单',
                    content:'/courseorder/edit?order_id=' + orderId,
                    area:['1000px','600px'],
                    btn:'关闭全部',
                    btnAlign:'c',
                    yes:function () {
                        parent.layer.closeAll();
                    }
                });
            }
        })
    });


</script>
</body>
</html>